<template>
	<view class="container">
		<uni-list :border="true">
			<uni-list-item title="申请状态:" :rightText="form.applyStatusStr" />
			<uni-list-item title="房间:" :rightText="form.roomName" />
			<uni-list-item title="合同周期:" :rightText="form.sourceStartTime+ '~' + form.sourceEndTime" />
			<uni-list-item title="距离到期时间(天):" :rightText="form.cycle?form.cycle:'0'" />
			<uni-list-item title="申请退租时间:" :rightText="form.applyTime" />
			<uni-list-item title="预计退租时间:" :rightText="form.endTime" />
		</uni-list>
<!-- 		<view class="tipsBox flex">
			<view class="tips flex flex-1"><u-icon class="mr-4rpx" color="#F8534B" size="14" name="info-circle"></u-icon>提前退租:这是一段提示</view>
		</view> -->
		<view class="btnBox flex">
			<view class="btn" v-if="form.applyStatus == 1" @click="cancel">撤销申请</view>
			<!-- <u-button text="撤销申请" v-if="form.applyStatus == 1" :plain="true" class="btn plain" @click="cancel"></u-button> -->
			<!-- <u-button text="修改申请" v-if="form.applyStatus != 4" type="primary" class="btn" @click="confirm"></u-button> -->
		</view>
	</view>
</template>

<script setup lang="ts">
import { cancelContractApplyDeatil,getContractApplyDeatil } from '@/common/API/contract'
import { onLoad} from "@dcloudio/uni-app"
import { reactive } from "vue";
import dayjs from "dayjs"

const form = reactive({
	roomName: null,
	applyStatusStr: null,
	applyStatus: null,
	sourceStartTime: null,
	sourceEndTime: null,
	cycle: null,
	applyTime: null,
	endTime: null,
	id: null,
	info: {}
})
//处理时间戳
const timestamp = (val : any, s) => {
	return !s ? dayjs(val).format('YYYY-MM-DD') : dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}
const cancel = () => {
	let res = cancelContractApplyDeatil(form.id)
	if(res){
		uni.showToast({
		  title: "撤销成功",
		  icon: "none"
		})
		uni.redirectTo({
			url: '/pages/personal/contract/contractList?flag=true'
		})
	}
}
const confirm = () => {
	uni.redirectTo({
		url: `/pages/personal/contract/ConQuit?info=${encodeURIComponent(JSON.stringify(form.info))}&type=edit`
	})
}
const getDetail = async () => {
	let res = await getContractApplyDeatil(form.id)
	if(res){
		let info = res
		form.info = info
		form.roomName = info.roomName
		form.id = info.id
		form.applyStatusStr = info.applyStatusStr
		form.sourceStartTime = info.sourceStartTime
		form.sourceEndTime = info.sourceEndTime
		// form.cycle = JSON.stringify(info.cycle)
		form.applyTime = info.applyTime
		form.endTime = info.endTime
		form.applyStatus = info.applyStatus
		form.cycle = JSON.stringify(dayjs(timestamp(form.sourceEndTime)).diff(timestamp(form.applyTime),'day'))
	}
}
onLoad((options)=>{
	if(options){
		form.id = options.id
		getDetail()
	}
})
</script>

<style lang="scss" scoped>
.container{
	padding: 32rpx 0;
	height: 100%;
	::v-deep.uni-list{
		.uni-list-item__content-title{
			font-size: 28rpx;
		}
		.uni-list-item__extra-text{
			font-size: 28rpx;
			color: #4D4D4D;
		}
	}
	.tipsBox{
		padding: 12rpx 32rpx;
		.tips{
			font-size: 24rpx;
			color: #F8534B;
			line-height: 46rpx;
		}
		.status{
			line-height: 46rpx;
		}
	}
	.list{
		padding: 20rpx 32rpx 10rpx;
		border-top: 2rpx solid #f3f3f3;
		::v-deep.uni-date{
			text-align: right;
			.uni-date__x-input{
				line-height: 54rpx;
				color: $uni-color-primary;
			}
			.uni-date-x--border{
				border: none;
			}
			.uni-icons{
				display: none;
			}
		}
	}
	.btn{
		// background: #fff;
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// width: 100%;
		// text-align: center;
		// padding: 30rpx 0 calc(30rpx + env(safe-area-inset-bottom));
		// .btn{
		// 	width: 327rpx;
		// 	height: 76rpx;
		// 	display: inline-block;
		// 	line-height: 76rpx;
		// 	border-radius: 100rpx;
		// 	::v-deep.u-button__text{
		// 		font-size: 32rpx !important;
		// 	}
		// 	&.plain{
		// 		border:2rpx solid $uni-color-primary;
		// 		text-align: center;
		// 		color: $uni-color-primary;
		// 		::v-deep.u-button__text{
		// 			color: $uni-color-primary;
		// 		}
		// 	}
		// }
		position: fixed;
		width: 686rpx;
		height: 84rpx;
		line-height: 84rpx;
		color: #fff;
		background: $uni-color-primary;
		bottom: 100rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		border-radius: 200rpx;
		text-align: center;
		::v-deep.u-button__text{
			font-size: 32rpx !important;
		}
	}
}
</style>
